<template>
  <div class="container">
    <div class="body">
      <h1>后台管理系统</h1>
      <el-form ref="form1" :model="form" :rules="rules" label-width="80px" style="text-align:left;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" show-password clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules:{
        username:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:5,max:20,message:'用户名请控制在5-20个字符之间',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {pattern:/[a-zA-Z0-9_]{6,15}$/,message:'密码必须为6-15位的字母数字或下划线！',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form1.validate(async (valid)=>{
        if(valid){
          const result = await this.$http.post('account/ckLogin',this.form)
          console.log(result)
          if(result.data.status === 'success'){
            this.$message.success('登录成功')
            //将用户信息存入缓存
            localStorage.setItem('account',JSON.stringify(result.data.data))
            // localStorage.setItem('account',JSON.stringify({username:'zs',password:'*****'}))
            //跳转页面  首页
            this.$router.push({
              name:'home'
            })
          }else{
            this.$message.error('登录失败')
          }
        }else{
          //console.log('请按照页面提示输入')
          this.$message.error('请按照页面提示输入')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100vw;
  background-image: url('../assets/bg.jpg');
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;

  .body {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 50px;
  }
}
</style>